 $(function(){
/**首先将需要操作的元素保存为变量
    * 建议大家在做任何DOM操作的时候都先保存为一个变量
    * 防止频繁的寻找DOM节点，降低了页面性能，虽然现在设备好了，
    * 但是优化还是有必要的，点点优化带来的是更加良好的用户体验
    **/
   var play=$('.playbtn');//播放暂停键

   var fullScreenBar=$('.fullscreenbar');//全屏键
   var durationBar=$('.durationbar');//总进度条
   var bufferBar=$('.bufferbar');//缓冲进度条
   
   var drawBar=$('.drawbar');//播放进度按钮
   var valbtn=$('.valbtn');//播放进度按钮
   

   var videos=$('video')//视频
  //  videos.forEach(v=>{
  //   console.log('v', v)
  //   console.log('v', $(v))
  //   playTime($(v))
  //  })
   $('video').click(function(){
     $(this).next().show()
     $(this).get(0).webkitExitFullscreen(); 
    //  $(this).next().find('playbtn').show()
   })
   valbtn.click(function(){
     var muted=$(this).parent().prev().prev().get(0).muted
     console.log('muted', muted)
    if(muted){
      $(this).parent().prev().prev().get(0).muted=false
      $(this).removeClass('mutedbtn')
    }else{
      $(this).parent().prev().prev().get(0).muted=true
      $(this).addClass('mutedbtn')
    }
    

   //  $(this).next().find('playbtn').show()
  })
   /**
   * 因为我使用的jquery,插件是不能直接调用video中的事件的
   * 所以需要使用get()方法将jquery对象转化为DOM对象，
   * 进而去使用video的各个事件
   **/
   // var videoDom=videoBody.get(0);

   var initTimeLength = function(timeLength){//根据秒数格式化时间
       timeLength = parseInt(timeLength);
       var second = timeLength%60;
       var minute = (timeLength-second)/60;
       return (minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second);
   };



   // /**
   // * 音量键的开启和关闭
   // **/
   // function muted(){
   //     //如果为静音则开启，如果为开启状态则关闭
   //     videoDom.muted=!videoDom.muted;
   // }

   /**
   * 视频时间处理
   **/
   function playTime(videoBody){
       // loadedmetadata方法主要是判断视频是否已加载,加载完毕才能获取视频时长;
       videoBody.on('loadedmetadata',function(){
           /**
           * duration 获取视频时长，即视频秒数；
           * 这里需要调用之前已经定义好的秒数处理函数initTimeLength
           * 转换为我们常见的时间格式
           **/
          console.log('this', this)
          $(this).next().next().find('.duration-time').text(initTimeLength($(this).get(0).duration));
       });
      //  ontimeupdate 当前视频播放位置反生改变触发的事件;
       videoBody.on('timeupdate',function(){
           // 视频时长

           var durationProgress=$(this).get(0).duration;
           // currentTime 当前播放时长
           var currentTimeProgress=$(this).get(0).currentTime;
           // 将当前播放时长填入左边时长元素中
           $(this).next().next().find('.current-time').text(initTimeLength($(this).get(0).currentTime));
           // 求当前播放时长的进度，从而显示出来进度条
           var currentWidth=100*(currentTimeProgress/durationProgress);
           var currentLeft=currentWidth-((drawBar.width()/2)/durationBar.width()*100);
          //  console.log('$(this).next().find(\'.currentbar\')', $(this).next().find('.currentbar'))
           $(this).next().next().find('.currentbar').css({width:currentWidth+'%'});
           $(this).next().next().find('.drawbar').css({left:currentLeft+'%'});
           $(this).next().next().find('.duration-time').text(initTimeLength($(this).get(0).duration));
       });
   }
   // 视频播放按钮点击事件
   play.on('click',function(){
     console.log(this);
      var videoDom = $(this).parents('.video-control').prev().get(0)
      var parent = $(this).parents('.video-control')
        if(videoDom.paused){
          videoDom.play();
          //通过操作不同的class，来切换键的形态
          $(this).addClass('pausebtn');
          parent.hide()
        }else{
          videoDom.pause();
          $(this).removeClass('pausebtn');
        }
   });

   // 全屏按钮点击事件，这里兼容不是很全，有兴趣深入的朋友可以自己百度查查
   fullScreenBar.on('click',function(){
       var videoDom = $(this).parent().prev().prev().get(0)
       if (document.webkitFullscreenElement) { 
           videoDom.webkitExitFullscreen(); 
       } else { 
           videoDom.webkitRequestFullscreen();
       } 
   });
  //  // 音量键的开启关闭
  //  mutedBtn.on('click',function(){
  //      muted();
  //  });
 })
 